<template>
  <ul class="klhtz-menu">
    <li v-for="item in menuData" :key="item.id" :class="{ 'klhtz-menu-item': !item.children, 'klhtz-menu-submenu': item.children }">
      <a v-if="!item.children" :href="item.link">{{ item.text }}</a>
      <span v-else>{{ item.text }}</span>
      <klhtz-menu v-if="item.children" :menuData="item.children"></klhtz-menu>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'KlhtzMenu',
  props: {
    menuData: {
      type: Array,
      required: true
    }
  }
};
</script>

<style>
/* Add your custom styling for the menu items and submenus */
.klhtz-menu {
  list-style: none;
  padding: 0;
}

.klhtz-menu-item {
  /* Your styles for menu items */
}

.klhtz-menu-submenu {
  /* Your styles for submenus */
}
</style>
